<template>
  <div id="Login">
    <el-menu mode="horizontal">
      <el-menu-item><img src="../../public/RecStream.png" class="image"></el-menu-item>
    </el-menu>
    <el-row type="flex" justify="center" align="middle">
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
        <el-form
          :rules="rules"
          rel="form"
          :model="login"
          label-width="1"
          label-position="top"
        >
          <el-form-item>
            <strong id="Title">登录</strong>
          </el-form-item>
          <el-form-item label="用户名" prop="username">
            <el-input placeholder="admin" v-model="login.username"> </el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              placeholder="admin"
              v-model="login.password"
              show-password
            >
            </el-input>
          </el-form-item>
          <el-form-item label=" ">
            <el-row type="flex" justify="center">
              <el-button type="primary" @click="logIn">登录</el-button>
            </el-row>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      login: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    logIn() {
      axios
        .get("/api/loginVerification", { params: { username: this.login.username, password: this.login.password }})
        .then((res) => {
          if (res.data === 'username/password error') {
            this.$notify.error({
              title: '登录信息错误',
              message: '请检查用户名/密码是否正确'
            })
          }
          else {
            this.$cookies.set("loginCode", res.data);
            this.$cookies.set("username", this.login.username);
            this.$router.push("/" + res.data + "/home");
          }
        })
        .catch((error) => {
          this.$notify.error({
            title: "错误",
            message: error,
          });
        });
    },
  },
};
</script>

<style scoped>
html,
body,
#Login {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: "Fira Code";
}

.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}

form {
  padding: 20px;
  margin: 20px;
}

img {
  height: 60%;
}

#Title {
  font-size: 2rem;
}
</style>